<template>
  <div>
    <van-form class="form">
      <van-field
        v-model="form.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="form.position"
        name="家庭住址"
        label="家庭住址"
        placeholder="家庭住址"
        :rules="[{ required: true, message: '请填写家庭住址' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.comm_name"
        label="社区"
        placeholder="点击选择社区"
        :rules="[{ required: true, message: '请选择社区' }]"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="comms_name"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>


      <van-field
        v-model="form.phone"
        name="电话"
        label="电话"
        placeholder="请填写电话"
        :rules="[{ required: true, message: '请填写电话' }]"
      />


      <van-field
        v-model="form.email"
        name="邮箱"
        label="邮箱"
        placeholder="选填"
      />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="onSubmit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import router from "../router";

export default {
  name: "Register",

  data() {
    return {
      form: {
        username: "",
        password: "",
        position: "",
        comm_name: '',
        phone: "",
        email: "",
      },

      comms_name: [],
      comms: [],
      showPicker: false,

    }
  },

  methods: {
    onConfirm(value) {
      this.form.comm_name = value;
      this.showPicker = false;
    },

    onSubmit() {
      var comm = this.comms.find(item => item.comm_name === this.form.comm_name)
      this.form.cid = comm.cid;

      this.axios({
        method: "post",
        url: "/user/register",
        data: this.form
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.$notify({type: 'success', message: '注册成功'});
            router.push('/login');
          }
        }
      })


    },

    handleData(value) {

    },


    getAllComms() {
      this.axios({
        method: "get",
        url: "/comm/getAllComms",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.comms = resp.data.data//记录原始信息

            var comms_name = new Array()
            for (var item of resp.data.data) {
              comms_name.unshift(item.comm_name)
            }
            this.comms_name = comms_name
            // console.log("comms" + resp.data.data)
          }
        }
      })
    }
  },

  created() {
    this.getAllComms()
  }


}
</script>

<style scoped>

</style>
